<ion-header>
  <ion-navbar>
    <ion-title [hidden]="isAdmin">
      {{title}}
    </ion-title>
    <ion-title [hidden]="!isAdmin || isLeavePage">
      <ion-segment [(ngModel)]="title_segment" color="light" class="title_segment" (ionChange)="titleSegmentChange()">
        <ion-segment-button id="segment_button_type" value="type" class="title_segment_button_left">
          类型净值
        </ion-segment-button>
        <ion-segment-button id="segment_button_group" value="group" class="title_segment_button_right">
          群组净值
        </ion-segment-button>
      </ion-segment>
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="moreOp()">操作</button>
    </ion-buttons>
  </ion-navbar>

  <div id="HeaderDiv" class="HeaderDiv">
    <ion-list id="zjrqIonList">
      <ion-row>
        <ion-col col-11>
          <ion-item>
            <ion-label>净值日期:</ion-label>
            <ion-datetime displayFormat="YYYY-MM-DD" pickerFormat="YYYY-MM-DD" [disabled]="true"
                          [(ngModel)]="netValueDate"
                          cancelText="取消" doneText="确定" (ionChange)="netValueDateChange()">
            </ion-datetime>
          </ion-item>
        </ion-col>
        <ion-col col-1 class="date_down_cursor">
          <!--<ion-icon name="arrow-down"></ion-icon>-->
        </ion-col>
      </ion-row>
    </ion-list>
    <div id="classifyTopDiv" class="classifyTopDiv" [hidden]="!isAdmin">
      <ion-scroll class="scrollClassifyTop" scrollX="true">
        <ion-segment id="classifyTop" class="segmentClassifyTop" [(ngModel)]="segmentClassifyTop"
                     (ionChange)="classifyTopSegmentChange()"
                     *ngIf="title_segment === 'type'"
                     color="white">
          <ion-segment-button *ngFor="let classify of classifyTopList" value="{{classify.value}}">
            <span>{{classify.name}}</span>
          </ion-segment-button>
        </ion-segment>

        <ion-segment id="classifyTop" class="segmentClassifyTop" [(ngModel)]="segmentClassifyTop"
                     (ionChange)="classifyTopSegmentChange()"
                     *ngIf="title_segment === 'group'"
                     color="white">
          <ion-segment-button *ngFor="let classify of classifyTopList" value="{{classify.value}}"
                              [disabled]="classify.value === segmentClassifyTop">
            <span>{{classify.name}}</span>
          </ion-segment-button>
        </ion-segment>
      </ion-scroll>
    </div>
    <div id="classifySecondDiv" class="classifySecondDiv" *ngIf="classifySecondList.length > 0">
      <ion-scroll #secondScroll id="scrollClassifySecond" class="scrollClassifySecond" scrollX="true"
                  scrollbar-x="true">
        <ion-segment id="classifySecond" [(ngModel)]="segmentClassifySecond"
                     class="segmentClassifySecond" color="white">
          <ion-segment-button *ngFor="let secondClassify of classifySecondList"
                              (click)="classifySecondSegmentChange(secondClassify)"
                              value="{{secondClassify.value}}" isActive="true" id="isb_{{secondClassify.value}}">
            <span>{{secondClassify.name}}</span>
          </ion-segment-button>
        </ion-segment>
      </ion-scroll>
    </div>
    <ion-grid class="DataGrid {{DataGridMargin}}" *ngIf="segmentClassifyTop != 'gzgm'">
      <ion-row id="GridHeader" class="GridHeader">
        <ion-col col-2 (click)="rankDataList('fundcode')">
          <p>产品简称</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='fundcode'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='fundcode'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankDataList('fdwjz')">
          <p>单位净值/万份收益</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='fdwjz'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='fdwjz'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankDataList('rzzl')">
          <p>增长率/七日年化</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='rzzl'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='rzzl'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankDataList('zcj')">
          <p>资产净值(亿)</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='zcj'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='zcj'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankDataList('gmbd')">
          <p>今年规模变动(亿)</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='gmbd'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='gmbd'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankDataList('jjzzl')">
          <p>今年净值增长率</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="rankObject.upRank && rankObject.field=='jjzzl'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!rankObject.upRank && rankObject.field=='jjzzl'"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid class="DataGrid {{DataGridMargin}}" *ngIf="segmentClassifyTop === 'gzgm'">
      <ion-row id="GridHeaderZzgm" class="GridHeader_gzgm">
        <ion-col col-3 (click)="rankGMDatas('typeName')">
          <p>类型</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="gmRankObject.upRank && gmRankObject.field=='typeName'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!gmRankObject.upRank && gmRankObject.field=='typeName'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankGMDatas('num')">
          <p>只数</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="gmRankObject.upRank && gmRankObject.field=='num'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!gmRankObject.upRank && gmRankObject.field=='num'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankGMDatas('gm')">
          <p>规模（亿）</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="gmRankObject.upRank && gmRankObject.field=='gm'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!gmRankObject.upRank && gmRankObject.field=='gm'"></ion-icon>
        </ion-col>
        <ion-col col-2 (click)="rankGMDatas('gmbd')">
          <p>规模变动（亿）</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="gmRankObject.upRank && gmRankObject.field=='gmbd'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!gmRankObject.upRank && gmRankObject.field=='gmbd'"></ion-icon>
        </ion-col>
        <ion-col col-3 (click)="rankGMDatas('gmbdl')">
          <p>规模变动率</p>
          <ion-icon name="arrow-up" class="rank_flag"
                    *ngIf="gmRankObject.upRank && gmRankObject.field=='gmbdl'"></ion-icon>
          <ion-icon name="arrow-down" class="rank_flag"
                    *ngIf="!gmRankObject.upRank && gmRankObject.field=='gmbdl'"></ion-icon>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

</ion-header>
<ion-content>
  <ion-grid class="DataGrid {{DataGridMargin}}" id="DataGridMargin" *ngIf="segmentClassifyTop != 'gzgm'">
    <!--<ion-row id="GridHeader" class="GridHeader">
      <ion-col col-2 (click)="rankDataList('fundcode')">
        <p>产品简称</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='fundcode'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='fundcode'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankDataList('fdwjz')">
        <p>单位净值/万份收益</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='fdwjz'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='fdwjz'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankDataList('rzzl')">
        <p>增长率/七日年化</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='rzzl'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='rzzl'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankDataList('zcj')">
        <p>资产净值(亿)</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='zcj'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='zcj'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankDataList('gmbd')">
        <p>今年规模变动(亿)</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='gmbd'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='gmbd'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankDataList('jjzzl')">
        <p>今年净值增长率</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="rankObject.upRank && rankObject.field=='jjzzl'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!rankObject.upRank && rankObject.field=='jjzzl'"></ion-icon>
      </ion-col>
    </ion-row>-->
    <ion-item-divider class='list-no-more-tips' color="light" [hidden]="isLoadMore">暂无更多数据...</ion-item-divider>
    <!--<ion-scroll #myScroll id="DataGridIonScroll" class="myScroll" scrollX="true" scrollY="true">-->
    <ion-row class="ContentColorUp" *ngFor="let data of nowDataList">
      <ion-col>
        <p class="substance">{{data.fundcode}}-{{data.fjjjc}}</p>
      </ion-col>

      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') < 0 && data.fdwjz">
        <p>{{data.fdwjz | formatGFRDataPipe: {unit:1, currency: 0.0001, dw:''} }}</p>
      </ion-col>
      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') < 0 && !data.fdwjz">
        <p>{{data.wfsy | formatGFRDataPipe: {unit:1, currency: 0.0001, dw:''} }}</p>
      </ion-col>
      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') > -1">
        <p>{{data.wfsy | formatGFRDataPipe: {unit:1, currency: 0.0001, dw:''} }}</p>
      </ion-col>

      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') < 0 && data.rzzl">
        <p [dataColor]="data.rzzl">{{data.rzzl | formatGFRDataPipe: {unit:1, currency: 0.01, dw:'%'} }}</p>
      </ion-col>
      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') < 0  && !data.rzzl">
        <p [dataColor]="data.qrnhsylv">{{data.qrnhsylv | formatGFRDataPipe: {unit:1, currency: 0.01, dw:'%'} }}</p>
      </ion-col>
      <ion-col col-2 *ngIf="data.vc_secondtype.indexOf('货币') > -1">
        <p [dataColor]="data.qrnhsylv">{{data.qrnhsylv | formatGFRDataPipe: {unit:1, currency: 0.01, dw:'%'} }}</p>
      </ion-col>

      <ion-col col-2>
        <p>{{data.zcj | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{data.gmbd | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p [dataColor]="data.jjzzl">{{data.jjzzl | formatGFRDataPipe: {unit:1, currency: 0.01, dw:'%'} }}</p>
      </ion-col>
    </ion-row>
    <ion-row class="ContentColorUp">
      <ion-col>
        <p>合计：</p>
      </ion-col>
      <ion-col col-2>
        <p>--</p>
      </ion-col>
      <ion-col col-2>
        <p>--</p>
      </ion-col>
      <ion-col col-2>
        <p>{{typeCountTotal.zcjz | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{typeCountTotal.gmbd | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p>--</p>
      </ion-col>
    </ion-row>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载更多数据...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <!--</ion-scroll>-->
  </ion-grid>

  <ion-grid class="DataGrid {{DataGridMargin}}" id="DataGridMargin2" *ngIf="segmentClassifyTop === 'gzgm'">
    <!--<ion-row id="GridHeaderZzgm" class="GridHeader_gzgm">
      <ion-col col-3 (click)="rankGMDatas('typeName')">
        <p>类型</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="gmRankObject.upRank && gmRankObject.field=='typeName'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!gmRankObject.upRank && gmRankObject.field=='typeName'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankGMDatas('num')">
        <p>只数</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="gmRankObject.upRank && gmRankObject.field=='num'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!gmRankObject.upRank && gmRankObject.field=='num'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankGMDatas('gm')">
        <p>规模（亿）</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="gmRankObject.upRank && gmRankObject.field=='gm'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!gmRankObject.upRank && gmRankObject.field=='gm'"></ion-icon>
      </ion-col>
      <ion-col col-2 (click)="rankGMDatas('gmbd')">
        <p>规模变动（亿）</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="gmRankObject.upRank && gmRankObject.field=='gmbd'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!gmRankObject.upRank && gmRankObject.field=='gmbd'"></ion-icon>
      </ion-col>
      <ion-col col-3 (click)="rankGMDatas('gmbdl')">
        <p>规模变动率</p>
        <ion-icon name="arrow-up" class="rank_flag"
                  *ngIf="gmRankObject.upRank && gmRankObject.field=='gmbdl'"></ion-icon>
        <ion-icon name="arrow-down" class="rank_flag"
                  *ngIf="!gmRankObject.upRank && gmRankObject.field=='gmbdl'"></ion-icon>
      </ion-col>
    </ion-row>-->
    <ion-row class="ContentColorUp" *ngFor="let data of gzgmDatas">
      <ion-col col-3>
        <p>{{data.typeName}}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{data.num}}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{data.gm | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{data.gmbd | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-3>
        <p [dataColor]="data.gmbdl">{{data.gmbdl | formatGFRDataPipe: {unit:1, currency: 0.0001, dw:'%'} }}</p>
      </ion-col>
    </ion-row>
    <ion-row class="ContentColorUp">
      <ion-col col-3>
        <p>{{gzgmTotal.typeName}}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{gzgmTotal.num}}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{gzgmTotal.gm | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-2>
        <p>{{gzgmTotal.gmbd | formatGFRDataPipe: {unit:100000000, currency: 0.01, dw:''} }}</p>
      </ion-col>
      <ion-col col-3>
        <p [dataColor]="gzgmTotal.gmbdl">{{gzgmTotal.gmbdl | formatGFRDataPipe: {unit:1, currency: 0.0001, dw:'%'}
          }}</p>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>
